<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h1 class="text-4xl mb-6">解构数组</h1>

                <h2 class="mb-5 flex items-center">解构赋值写法<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode1" name="解构赋值写法" class="mb-10" />
                <Codemirror :code="destructuringCode18" name="解构赋值写法" class="mb-10" />

                <h2 class="mb-5 flex items-center">不完全解构<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode2" name="不完全解构" class="mb-10" />

                <h2 class="mb-5 flex items-center">解构数组嵌套<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode3" name="解构数组嵌套" class="mb-10" />

                <h2 class="mb-5 flex items-center">与...运算符结合使用<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode4" name="与...运算符结合使用" class="mb-10" />
                <Codemirror :code="destructuringCode17" name="与...运算符结合使用" class="mb-10" />

                <h1 class="text-4xl mb-6">解构对象</h1>

                <Codemirror :code="destructuringCode5" name="左边定义的变量名与右边对象的属性名相同时" class="mb-10" />
                <Codemirror :code="destructuringCode6" name="左边定义的变量名与右边对象的属性名不相时" class="mb-10" />

                <h2 class="mb-5 flex items-center">获取成员<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode7" name="解构赋值对可以用来提取 JSON 对象中的数据" class="mb-10" />
                <Codemirror :code="destructuringCode8" name="解构赋值的方式从对象中获取成员" class="mb-10" />

                <h2 class="mb-5 flex items-center">对象赋值<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode15" name="声明后赋值" class="mb-10" />
                <Codemirror :code="destructuringCode16" name="无声明赋值" class="mb-10" />

                <h2 class="mb-5 flex items-center">解构嵌套对象<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode9" name="解构嵌套对象" class="mb-10" />
                <Codemirror :code="destructuringCode10" name="解构嵌套对象" class="mb-10" />

                <h1 class="text-4xl mb-6">解构函数</h1>

                <h2 class="mb-5 flex items-center">函数的参数<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode11" name="函数的参数也可以使用解构赋值" class="mb-10" />
                <Codemirror :code="destructuringCode12" name="函数参数的解构也可以使用默认值" class="mb-10" />

                <h1 class="text-4xl mb-6">其他解构</h1>

                <h2 class="mb-5 flex items-center">字符串<el-tag class="ml-2">ES2016</el-tag></h2>
                <Codemirror :code="destructuringCode13" name="字符串会被转换成了一个类似数组的对象" class="mb-10" />
                <Codemirror :code="destructuringCode14" name="字符串的length属性也能进行解构赋值" class="mb-10" />

            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        const destructuringCode1 = ref(`var a1 = 1,b1 = 2;
console.log(a1,b1)	// 1 2

var a2,b2;
a2 = 11;
b2 = 22;
console.log(a2,b2)	// 11 22

var arr = ['jack','rose'];
console.log(arr[0],arr[1])	// jack rose`)

        const destructuringCode2 = ref(`let [x, y] = [1, 2, 3];
console.log(x, y); // 1 2

let [a, [b], c] = [1, [2, 3], 4];
console.log(a, b, c); // 1 2 4`)

        const destructuringCode3 = ref(`let arr = [1, [[2,22], 3]];
let [a,[b,c]] = arr;
console.log(a, b, c); // 1 [2,22] 3`)

        const destructuringCode4 = ref(`let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]`)

        const destructuringCode5 = ref(`let {x, y} = {x: 1, y: 2,}
// 相当于 {x: x, y: y} = {x: 1, y: 2,}
console.log(x, y)	// 1 2`)

        const destructuringCode6 = ref(`let {x: a, y: b} = {x: 1, y: 2,}
// 此时x，y是用来匹配右边对象的属性名，a，b才是变量
console.log(a, b)	// 1 2`)

        const destructuringCode7 = ref(`const obj = {
	name : 'jack',
	age : 18,
	gender : '男'
}
let name = obj.name;
let age = obj.age;
let gender = obj.gender;
console.log(name,age,gender)`)

        const destructuringCode8 = ref(`const obj = {
	name : 'jack',
	age : 18,
	gender : "男"
}
//前面的{}表示我要从obj这个对象中获取成员了
//name age gender 都得是 obj 中有的成员
//obj 必须是一个对象
let { name,age,gender } = obj;
console.log(name,age,gender)`)

        const destructuringCode9 = ref(`let obj = {
  a: [
    'Hello',
    { y: 'JavaScript' }
  ]
};
let { a: [x, { y }] } = obj;
console.log(x, y); // Hello JavaScript`)

        const destructuringCode10 = ref(`let obj = {
	a:{
		b:{
			x:1,
			y:2
		}
	}
}
let {a,a:{b},a:{b:{x,y}}} = obj;
console.log(JSON.stringify(a));	// {b: {…}}
console.log(JSON.stringify(b));	// {x: 1, y: 2}
console.log(x, y);	// 1 2`)

        const destructuringCode11 = ref(`function fn([x, y]){
  return x + y;
}
console.log(fn([1, 2])); // 3`)

        const destructuringCode12 = ref(`function fn({x = 8,y} = {}) {
  console.log(x,y);
  return [x, y];
}
fn(); 				// [8, undefined]
fn({}); 			// [8, undefined]
fn({x: 9}); 		// [9, undefined]
fn({x: 6, y: 4});	// [6, 4]`)

        const destructuringCode13 = ref(`let [a, b, c] = 'ES6';
console.log(a, b, c)	// E S 6`)

        const destructuringCode14 = ref(`let {length : l} = 'ES6';
console.log(l) // 3`)

        const destructuringCode15 = ref(`let obj = {a: 6, b: 4};
let {a, b} = obj;
console.log(a,b); // 6 4`)

        const destructuringCode16 = ref(`let a, b;
({a, b} = {a: 1, b: 2});
console.log(a, b); // 1 2`)

        const destructuringCode17 = ref(`var person = {
  name:"baidu",
  address:"广东",
  link:"https ://www.baidu.com",
  phone:1234567,
  go() {console,log("开始上班了")}
}

var {name,address,...person2} = person;
console.log(name)
console.log(address)
console.log(JSON.stringify(person2))`)

        const destructuringCode18 = ref(`var title ="baidu";
var link="https://www.baidu.com" ;
let info2 = {
  title,
  link,
  go(){
    return 'test'
  }
}
console.log(JSON.stringify(info2));
console.log(info2.title);
console.log(info2.link);
console.log(info2.go());`)

        return {
            destructuringCode1,
            destructuringCode2,
            destructuringCode3,
            destructuringCode4,
            destructuringCode5,
            destructuringCode6,
            destructuringCode7,
            destructuringCode8,
            destructuringCode9,
            destructuringCode10,
            destructuringCode11,
            destructuringCode12,
            destructuringCode13,
            destructuringCode14,
            destructuringCode15,
            destructuringCode16,
            destructuringCode17,
            destructuringCode18,
        }
    }
})
</script>

<style scoped>

</style>